<template>
	<view class="ruzhu_main">
		<u--form labelPosition="left" :errorType="errorType" :model="datalist" :rules="rules" ref="uForm">
			<u-form-item prop="userInfo.dailihao" borderBottom ref="item1">
				<view class="inputs">
					<text>代理号</text>
					<input placeholder="请输入代理号(咨询代理商获取)" v-model="datalist.userInfo.dailihao" style="text-align:right"
						border="none"></input>
				</view>
			</u-form-item>
			<u-form-item prop="userInfo.name" borderBottom ref="item1">
				<view class="inputs">
					<text>店铺名称</text>
					<input placeholder="请输入店铺名称" v-model="datalist.userInfo.name" style="text-align:right"
						border="none"></input>
				</view>
			</u-form-item>
			<u-form-item prop="userInfo.adds" borderBottom ref="item1">
				<view class="inputs">
					<text>店铺地址</text>
					<input placeholder="小区写/字楼>" @click="getLocationInfo" v-model="datalist.userInfo.adds"
						style="text-align:right" border="none"></input>
				</view>
			</u-form-item>
			<u-form-item prop="userInfo.menpaihao" borderBottom ref="item1">
				<view class="inputs">
					<text>门牌号</text>
					<input placeholder="请输入楼号/门牌号" v-model="datalist.userInfo.menpaihao" style="text-align:right"
						border="none"></input>
				</view>
			</u-form-item>
			<u-form-item prop="userInfo.username" borderBottom ref="item1">
				<view class="inputs">
					<text>联系人</text>
					<input placeholder="请输入联系人" v-model="datalist.userInfo.username" style="text-align:right"
						border="none"></input>
				</view>
			</u-form-item>
			<u-form-item prop="userInfo.dianhuahao" borderBottom ref="item1">
				<view class="inputs">
					<text>手机号码</text>
					<input placeholder="请输入手机号码" type="number" v-model="datalist.userInfo.dianhuahao"
						style="text-align:right" border="none"></input>
				</view>
			</u-form-item>
			<u-form-item prop="userInfo.wx" borderBottom ref="item1">
				<view class="inputs">
					<text>微信号</text>
					<input placeholder="请输入微信" v-model="datalist.userInfo.wx" style="text-align:right"
						border="none"></input>
				</view>
			</u-form-item>

			<u-form-item prop="userInfo.yewu" borderBottom ref="item1">
				<view class="inputs">
					<text>主营业务</text>
					<input placeholder="如批发/维修等" v-model="datalist.userInfo.yewu" style="text-align:right"
						border="none"></input>
				</view>
			</u-form-item>

			<view class="issc">

			</view>

			<view>
				<view class="sites">
					<text>店铺照片</text>
					<text>(至少上传3张，店铺角度请参考示例图)</text>
					<text>示例图片</text>
				</view>
				<view class="updtop">
					<u-upload :fileList="fileList1" uploadText='添加图片' @afterRead="afterRead" @delete="deletePic"
						name="1" multiple :maxCount="10">
					</u-upload>
				</view>
			</view>
			<view class="isscs">

			</view>

			<view>
				<view class="sites">
					<text>营业执照</text>
				</view>
				<view class="updtop">
					<u-upload uploadText='添加图片' :fileList="fileList4" @afterRead="afterReads" @delete="deletePicd"
						name="4" multiple></u-upload>
				</view>

			</view>

		</u--form>

		<view class="ssd">
			<button class="buttt" @click="submit()">提交申请</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				errorType: 'none',
				msname: '',
				fileList1: [],
				fileList4: [],
				datalist: {
					userInfo: {
						dailihao: '',
						name: '',
						adds: '',
						menpaihao: '',
						username: '',
						dianhuahao: '',
						wx: '',
						yewu: '',
						jingdu: '',
						weidu: '',
						imgs: [],
						imgd: []
					}
				},

				rules: {
					'userInfo.dianhuahao': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							min: 11,
							max: 11,
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'userInfo.dailihao': {
						type: 'string',
						required: true,
						message: '请输入代理号(咨询代理商获取)',
						trigger: ['change', 'blur']
					},
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请输入店铺名称',
						trigger: ['change', 'blur']
					},
					'userInfo.adds': {
						type: 'string',
						required: true,
						message: '请输入小区/写字楼地址',
						trigger: ['change', 'blur']
					},
					'userInfo.menpaihao': {
						type: 'string',
						required: true,
						message: '请输入楼号/门牌号',
						trigger: ['change', 'blur']
					},
					'userInfo.username': {
						type: 'string',
						required: true,
						message: '请输入联系人',
						trigger: ['change', 'blur']
					},
					'userInfo.wx': {
						type: 'string',
						required: true,
						message: '请输入微信',
						trigger: ['change', 'blur']
					},
					'userInfo.yewu': {
						type: 'string',
						required: true,
						message: '请输入主营业务',
						trigger: ['change', 'blur']
					}
				}
			}
		},
		methods: {

			submit() {
				this.$refs.uForm.validate().then(res => {
					this.$http.postadd(this.datalist).then(res => {
						console.log(res);
						uni.$u.toast(res.info)
						if(res.code != 0){
							setTimeout(() => {
								uni.switchTab({
									url: '../jingxiao/myjingxiao/myjingxiao'
								});
							}, 2000);
						}

					})
				}).catch(errors => {
					console.log(errors[0].message);
					uni.$u.toast(errors[0].message)
				})
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				console.log('信息如下：');
				console.log(this[`fileList${event.name}`]);
				this.datalist.userInfo.imgs.splice(event.index, 1)
			},
			// 删除图片
			deletePicd(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				console.log('信息如下：');
				console.log(this[`fileList${event.name}`]);
				this.datalist.userInfo.imgd.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},





			uploadFilePromise(url) {
				console.log(this.datalist.userInfo);
				console.log(this.datalist.userInfo.imgs);
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://xie.sdjunchen.com/index/api.upload/file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							setTimeout(() => {
								var jsonStr = res.data;
								jsonStr = jsonStr.replace(" ", "");
								if (typeof jsonStr != 'object') {
									jsonStr = jsonStr.replace(/\ufeff/g, ""); //字符串转化JSON对象
									var jj = JSON.parse(jsonStr);
									res.data = jj;
								}
								this.datalist.userInfo.imgs.push(jj.data.url)
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},



			// 新增图片
			async afterReads(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromises(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},


			uploadFilePromises(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://xie.sdjunchen.com/index/api.upload/file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								var jsonStr = res.data;
								jsonStr = jsonStr.replace(" ", "");
								if (typeof jsonStr != 'object') {
									jsonStr = jsonStr.replace(/\ufeff/g, ""); //字符串转化JSON对象
									var jj = JSON.parse(jsonStr);
									res.data = jj;
								}
								this.datalist.userInfo.imgd.push(jj.data.url)
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},




			asb() {
				wx.getSetting({
					success(res) {
						const writePhotosAlbum = res.authSetting['scope.userLocation']
						if (!writePhotosAlbum) { //检查用户是否授权
							openSetting()
						} else {

						}
					}
				})
				const openSetting = () => {
					wx.openSetting({
						success(res) {
							console.log(res)
						}
					})
				}
			},
			// 获取地理位置
			getLocationInfo() {
				this.asb()
				var _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						_this.datalist.userInfo.adds = res.address
						_this.datalist.userInfo.jingdu = res.longitude
						_this.datalist.userInfo.weidu = res.latitude
					}
				});
			},


		}
	}
</script>

<style>
	.ssd {
		width: 100%;
		bottom: 0px;
	}

	.buttt {
		margin-top: 10px;
		margin-bottom: 10px;
		background-color: #000000;
		border: 1px solid #000;
		border-radius: 30px;
		font-size: 15px;
		color: #ffad42;
		line-height: 50px;
		width: 95%;
	}

	.ruzhu_main {
		height: 100%;
	}

	.inputs {
		display: flex;
		justify-content: space-between;
		line-height: 30px;
	}

	.inputs>input {
		width: 80%;
	}

	.inputs>text {
		color: #000000;
	}

	.issc {
		background-color: #f3f1f4;
		height: 10px;
		width: 100%;
	}

	.isscs {
		background-color: #f3f1f4;
		height: 1px;
		width: 100%;
	}

	.u-form-item {
		margin: 0 10px 0 10px;
	}

	.sites {
		padding: 0 10px 0 10px;
		display: flex;
		justify-content: space-between;
		margin: 15px 0 15px 0;
	}

	.sites>text:nth-child(1) {
		font-size: 16px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.sites>text:nth-child(2) {
		color: #808080;
		font-size: 12px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.sites>text:nth-child(3) {
		color: red;
		font-size: 12px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.updtop {
		padding: 0 10px 0 10px;
	}
</style>
